<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的直播间</title>
    <style>
        *{margin: 0;padding: 0}
        .gift{
            width: 800px;
            height: 100px;
            position: fixed;
            bottom: 10px;
            left: calc((100% - 800px) / 2);
            border-radius: 10px;
            /*来点阴影*/
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            /*来点阴影*/
            background-color: rgba(255,255,255,0.8);
        }
        .gift-png{
            width: 80px;
            height: 80px;
            margin-top: 10px;
            float: left;
            margin-left: 10px;
            cursor: pointer;
            background-size: 100% 100%;
            border-radius: 20px;
            box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.5);
        }
        .hj{
            background-image: url("images/hj.png");
        }
        .hj:hover{
            background-image: url("images/hj-dh.webp");
        }
        .fj{
            background-image: url("images/fj.png");
        }
        .fj:hover{
            background-image: url("images/fj-dh.webp");
        }
        .move-and-fade {
            width:80px;
            position: absolute;
            white-space: nowrap; /* 防止文本换行 */
            animation: show 10s linear forwards; /* 应用动画 */
        }
        .content {
            position: fixed;
            left: 50%;
            top: 50px;
            transform: translateX(-50%);
            width: 800px;
            height: 500px;
            border: 1px solid red;
            overflow:hidden;
        }
        .out_box{
            width: 800px;
            height: 500px;
            margin: 50px auto;
            border: 1px solid;
            position: relative;
        }
        #sendMsg{
            position: absolute;
            bottom: 40px;
            left: 40%;
        }
        .hj-size{
            width: 25px;
            position: relative;
            top: 7px;
            box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.5);
        }
        @keyframes show{
            from {
                right: -20%;
            }
            to {
                right: 120%;
            }
        }
    </style>
</head>
<body>
<div class="content"></div>
<div class="out_box">
    <div class="gift">
        <div class="gift-png hj" name="hj" onclick="sendMsg('101')">
            <img id="hj" src="images/hj-dh.webp" >
        </div>
        <div class="gift-png fj" name="fj" onclick="sendMsg('102')">
            <img id="fj" src="images/fj-dh.webp" >
        </div>
    </div>
    <div id="sendMsg">
        <input type="text" id="inputText">
        <input type="button" value="发送" onclick="sendMsg('000')">
    </div>
</div>


</body>
<script src="https://pss.bdstatic.com/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
<script src="js/live-socket.js"></script>
<script>
    const content = document.querySelector('.content');

    //发送弹幕 礼物
    function sendMsg(code) {
        let m = JSON.stringify({
            "code": code,
            "text":$("#inputText").val(),
            "nickname":localStorage.getItem("nickname"),
        })
        ws2.send(m)
    }

    function render(data){
        let nickname = data["nickName"];// null
        let text = data.text; // 报错
        let code = data.code;
        switch (code) {
            case "000":
                $("#inputText").val("");
                $(".content").append("<div class='move-and-fade'>"+nickname+"："+text+"</div>");
                break;
            case "101":
                $(".content").append("<div class='move-and-fade'><img id=\"hj\" class='hj-size' src=\"images/hj-dh.webp\" >    "+nickname+"</div>");
                break
            case "102":
                $(".content").append("<div class='move-and-fade'><img id=\"fj\" class='hj-size' src=\"images/fj-dh.webp\" >    "+nickname+"</div>");
                break
        }
    }


</script>
</html>